
<!-- Process loading -->
<div class="progress-loading" *ngIf="isButtonDisabled">
    <mat-spinner [diameter]="40" [strokeWidth]="1"></mat-spinner>
</div>

<!-- Close modal -->
<div class="close-dialog">
    <button mat-icon-button (click)="onClose()">
        <mat-icon>close</mat-icon>
    </button>
</div>

<!-- If the balance is empty -->
<no-funds-trx *ngIf="wallet.balance == 0"></no-funds-trx>

<!-- If everything is fine with the balances, we create a transaction -->
<ng-container *ngIf="wallet.balance > 0">

    <!-- Transaction Details -->
    <transaction-info *ngIf="isTransactionInfo" [token]="tokenName" [transaction]="signedTransaction"></transaction-info>

    <div *ngIf="!isTransactionInfo" class="transfer-window" [ngClass]="{ 'confirm': isConfirmed }">
        <!-- If the transaction is successful -->
        <div class="success-transaction" *ngIf="isSuccess">
            <div id="header">
                <h1>{{'Wallet.TransferAsset.Success' | translate}}</h1>
                <p>{{'Wallet.TransferAsset.SuccessDescription' | translate}}</p>
            </div>
            <lottie-animation-view [options]="lottieConfig" [width]="400" [height]="400"></lottie-animation-view>
        </div>
        <ng-container *ngIf="!isSuccess">
            <!-- Transaction confirmation -->
            <div *ngIf="isConfirmed" class="confirm-tx">
                <h1 mat-dialog-title>{{'Wallet.TransferAsset.TransactionDetails' | translate}}</h1>
                <div mat-dialog-content>
                    <confirm-tx *ngIf="confirmDetails" [txp]="confirmDetails" [token]="tokenName"></confirm-tx>
                </div>
                <div mat-dialog-actions fxLayout="row" fxLayoutAlign="space-evenly center" >
                    <button mat-stroked-button (click)="onBack()" color="primary"
                            class="tron-default-button transfer-button">
                        {{'Wallet.TransferAsset.Back' | translate}}
                    </button>
                    <button mat-button="" (click)="submitTransaction()" color="primary"
                            [disabled]="isButtonDisabled"
                            class="tron-button transfer-button">
                        {{'Wallet.TransferAsset.SubmitTransaction' | translate}}
                    </button>
                </div>
            </div>
            <!-- Transaction creation form -->
            <div class="create-tx-form" *ngIf="!isConfirmed">
                <h1 mat-dialog-title>{{'Wallet.TransferAsset.Title' | translate}}</h1>
                <div mat-dialog-content>
                    <div class="transfer-form-fields" fxLayout="column">
                        <mat-form-field appearance="outline">
                            <mat-label>{{'Wallet.TransferAsset.Token' | translate}}</mat-label>
                            <mat-select (selectionChange)="onTokenChange()" [placeholder]="'Wallet.TransferAsset.Token' | translate"
                                        [(value)]="fields.token">

                                <mat-form-field class="mat-select-search" floatLabel="never">
                                    <input matInput [placeholder]="'Wallet.TransferAsset.SearchToken' | translate"
                                           [(ngModel)]="filterSearch" (input)="getItems($event)">

                                    <button matSuffix mat-icon-button *ngIf="!filterSearch">
                                        <mat-icon>search</mat-icon>
                                    </button>
                                    <button matSuffix mat-icon-button (click)="clearFilter()" *ngIf="filterSearch && filterSearch.length > 0">
                                        <mat-icon>clear</mat-icon>
                                    </button>
                                </mat-form-field>

                                <!-- List tokens -->
                                <mat-selection-list class="token-select-list">
                                    <div *ngIf="listTokens && !filteredListTokens.length" class="mat-select-empty">
                                        {{ 'NoSearchResult' | translate }}
                                    </div>

                                    <ng-container *ngFor="let asset of filteredListTokens">
                                        <mat-option [value]="asset.key" fxLayout="row">
                                            <span class="token-id">[{{asset.key}}]</span>
                                            {{ asset.name }}
                                            <span fxFlex></span>
                                            <span [style.fontSize]="'12px'" [style.color]="'#ffffff8c'">
                                                {{asset.value  | sunToUnit:asset.name}} available
                                            </span>
                                        </mat-option>
                                    </ng-container>
                                </mat-selection-list>
                            </mat-select>
                        </mat-form-field>
                        <mat-form-field appearance="outline">
                            <mat-label>{{'Wallet.TransferAsset.To' | translate}}</mat-label>
                            <input matInput [placeholder]="'Wallet.TransferAsset.ToLabel' | translate"
                                   [(ngModel)]="fields.toAddress" name="toAddress">
                            <mat-hint class="warning-hint-field" *ngIf="wallet.address === fields.toAddress">
                                {{'Wallet.TransferAsset.AddressWarning' | translate}}
                            </mat-hint>
                            <button matSuffix mat-icon-button [matMenuTriggerFor]="menu" *ngIf="filteredContactsList && filteredContactsList[0]">
                                <mat-icon>assignment_ind</mat-icon>
                            </button>
                        </mat-form-field>
                        <div fxLayout="row" fxLayoutAlign="center center">
                            <mat-form-field fxFlex class="amount" appearance="legacy" [floatLabel]="'never'">
                                <input matInput placeholder="0" [(ngModel)]="fields.amount"
                                       (ngModelChange)="processAmount('trx')" onlyNumber name="amount">
                                <span matSuffix>{{ tokenName }}</span>
                                <mat-hint fxLayout="row" *ngIf="fields.token == '1'">
                                    <input matInput placeholder="0" [(ngModel)]="alternativeAmount" onlyNumber
                                           (ngModelChange)="processAmount('fiat')" value="0.00">
                                    <span matSuffix>{{fiatCode}}</span>
                                </mat-hint>
                            </mat-form-field>

                            <!-- Send max balance -->
                            <button fxFlex="2" class="send-max" mat-button
                                    [disabled]="fields.amount == tokenBalance" (click)="sendMax()">MAX</button>
                        </div>
                    </div>

                    <!-- Additional notifications when sending -->
                    <div class="notification">
                        <!-- Displayed in case of lack of funds. -->
                        <div class="warning-notify" *ngIf="fields.amount > tokenBalance">
                            {{'Wallet.TransferAsset.NotFunds' | translate}}
                        </div>
                        <!-- Initial notice -->
                        <div class="warning-notify" *ngIf="fields.amount == 0">
                            {{'Wallet.TransferAsset.AmountHint' | translate}}
                        </div>
                    </div>
                </div>
                <div mat-dialog-actions>
                    <button mat-button="" (click)="goToConfirm()" color="primary" [disabled]="enabledSend()"
                            class="tron-button transfer-button">{{'Wallet.TransferAsset.Send' | translate}}</button>
                </div>
            </div>
        </ng-container>
    </div>
</ng-container>


<!-- List contracts -->
<mat-menu #menu="matMenu">
    <button mat-menu-item *ngFor="let item of filteredContactsList | orderBy : ['name']"
            (click)="chooseAddress(item.address)" [disabled]="item.address == fields.toAddress">{{item.name}}</button>
</mat-menu>
